<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<link rel="stylesheet" type="text/css" href="../css/home.css"/>
		<style type="text/css">
			body,.mui-content{background-color: #edf0f4;}
			.mui-table-view-cell>a:not(.mui-btn) {margin-left: 20px;}
			.cs_user_box{height: 85px;background-color: #fff;margin-top:10px ;margin-bottom: 26px;position: relative;}
			.cs_user_box img{width: 65px;height: 65px;border-radius: 50%;position: absolute;margin-left: 13px;top: 10px;}
			.cs-user_info{margin-left: 91px;color: #5a5a5a;}
			.cs-user_info h1{font-size: 16px;font-weight: bold;line-height: 25px;padding-top: 20px;display: block;position: relative;}
			.cs_edit{height: 16px;width: 16px;background-image: url(../img/edit.png);background-position: center;background-repeat: no-repeat;background-size: 90% 90%;display: inline-block;margin-left: 10px;}
			.cs_right_info{top: 11px;position: absolute;right: 35px;color: #8c8c8c;font-size: 15px;}
			.cs_menu_item{margin-bottom: 16px;}
			.cs_menu_icon{position: absolute;width: 22px;height: 22px;background-size: 100%;background-position: center;background-repeat: no-repeat;}
			.cs_menu_icon_1 {background-image: url(../img/home_icon_5.png);}
			.cs_menu_icon_2 {background-image: url(../img/home_icon_4.png);}
			.cs_menu_icon_3 {background-image: url(../img/home_icon_3.png);}
			.cs_menu_icon_4 {background-image: url(../img/home_icon_2.png);}
			.cs_menu_icon_5 {background-image: url(../img/home_icon_1.png);}
			.cs_out_login{margin-top: 35px;}
			
			.cs_mask{background-color: rgba(0,0,0,0.5);position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;display: none;}
			.edit_nick{width: 88vw;height: 40vw;background-color: #fff;border-radius: 10px;overflow: hidden;text-align: center;padding: 6vw 0;margin-left: 6vw;margin-top: calc(50vh - 20vw);}
			.edit_nick input{width: 83%;margin: 0 auto;display: inline-block;border: none;border-bottom: 1px solid #d3d4d6;margin-bottom: 5vw;-webkit-appearance:none;outline:none;border-radius: 0;}
			.cs_mask button{background-color: #f77b00;color: #fff; width: 83%;border: none;box-shadow: 0px 5px 8px #f9d6aa;}
		</style>
		<title>个人主页</title>
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav jjs-header">
			<h2 class="mui-title">个人主页</h2>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left-result"></a>
			<a class="mui-icon mui-icon-bars mui-pull-right header-right"></a>
		</header>
		<div class="mui-content">
			<div class="cs_user_box">
				<img src="../img/01.jpg"/>
				<!--默认头像-->
				<!--<img src="../img/user_defult.png"/>-->
				<div class="cs-user_info mui-navigate-right">
					<h1 onclick="edit_nick()">张新亚<i class="cs_edit"></i></h1>
					<p>手机号：<span>18581124568</span></p>
				</div>
			</div>
			
			<div class="cs_menu_item">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell">
				    	<i class="cs_menu_icon cs_menu_icon_1"></i>
				        <a class="mui-navigate-right">自选基金</a>
				        <span class="cs_right_info">3只基金</span>
				    </li>
				</ul>
			</div>
			
			<div class="cs_menu_item">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell">
				    	<i class="cs_menu_icon cs_menu_icon_2"></i>
				        <a class="mui-navigate-right">我关注的公司</a>
				        <span class="cs_right_info">1个公司</span>
				    </li>
				    <li class="mui-table-view-cell">
				    	<i class="cs_menu_icon cs_menu_icon_3"></i>
				        <a class="mui-navigate-right">我关注的经理</a>
				        <span class="cs_right_info">2个经理</span>
				    </li>
				    <li class="mui-table-view-cell">
				    	<i class="cs_menu_icon cs_menu_icon_4"></i>
				        <a class="mui-navigate-right">浏览记录</a>
				        <span class="cs_right_info">132条记录</span>
				    </li>
				</ul>
			</div>
			
			<div class="cs_menu_item">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell">
				    	<i class="cs_menu_icon cs_menu_icon_5"></i>
				        <a class="mui-navigate-right">安全设置</a>
				    </li>
				</ul>
			</div>
			
			<ul class="mui-table-view cs_out_login">
			    <li class="mui-table-view-cell t_cen">
			    	退出
			    </li>
			</ul>
			
			
			<div class="cs_mask">
				<div class="edit_nick">
					<input type="text" name="nick_val" id="nick_val" value="" placeholder="修改昵称"/>
					<button class="mui-btn" id="save_nick_btn">确认修改</button>
				</div>
			</div>
			
			<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				function edit_nick () {
//					alert(1)
					$('.cs_mask').show();
				}
				$('#save_nick_btn').on('tap',function  () {
					var nick = $('#nick_val').val();
					$.ajax({
						type:"post",
						url:"",
						data:{nick:nick},
						dataType:'json',
						success:function  (ret) {
							console.log(ret)
							$('cs_mask').hide();
						},
						error:function  (err) {
							$('cs_mask').hide();
							mui.toast(err.msg)
						}
					});
				})
			</script>
		</div>
	</body>
</html>
